<template lang="html">

	<div style=" background-color: white;" id="car">

		<div class="car">

			<div id="fanhui" @click="backe">
				<img src="../../static/img/houtui.png" />返回
			</div>

			<div id="">
				购物袋
			</div>
			<div @click="bianji">
				<span v-if="flag">编辑</span>
				<span v-else="" style="color: red;">完成</span>
			</div>

		</div>
		<!--放置商品-->
		<!--:data="tableData"-->
		<!--这里的布局就是elementUI用的是其中一部分删栏布局-->
		<div style='margin-top:.5rem; width: 100%;' class="gouwu">
			<!--用show3不用表示符的原因是show3是在cookie中用标识符会在刷新的时候使删除无用-->
			<el-row :gutter="20" v-show='show3' id='delete1'>
				<el-col :span="6" class='img'>
					<div id="el-col"><label for=""><input id="all" checked="checked" type="checkbox" ></label><img :src="show2"></div>
				</el-col>
				<el-col :span="12">{{show1}}
					<div id="bianji" v-show="!flag"><span @click="reduce()">-</span><span>{{count}}</span><span @click="add()" style="border: none;">+</span></div>
				</el-col>
				<el-col :span="6">{{show3}}
					<p><label>x{{this.count}}</label></p>
				</el-col>
				<!--<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
			</el-row>

			<el-row :gutter="20" v-show='msgs2'>
				<el-col :span="6" class='img'>
					<div id="el-col"><label for=""><input id="alls" checked="checked" type="checkbox" ></label><img :src="msgs1"></div>
				</el-col>
				<el-col :span="12">{{msgs2}}
					<div id="bianji" v-show="!flag">
						<span @click="$store.commit('reduces',1)">-</span>
						<span>{{counts}}</span>
						<span @click="$store.commit('adds',1)" style="border: none;">+</span></div>
				</el-col>
				<el-col :span="6">￥{{money}}
					<p><label>x{{counts}}</label></p>
				</el-col>
			</el-row>

		</div>

		<div class="shop">
			<!--选商品的操作-->
			<div class='shangPin'>
				<div class="heji">
					<div v-if="flag">合计：
						<span v-show="show3">{{count}}</span>
						<span v-show="msgs2">{{counts}}</span>
					</div>
					<div v-else @click='quanxuan'>
						<label for=""><input type="checkbox"  checked="checked"/></label>&nbsp;&nbsp;<span>全选</span>
					</div>
				</div>
				<div class="jiage">
					<!--结算的操作-->
					<div v-show='flag' plain @click="jiesuan">
						<span @click="$store.commit('dele')">付款</span>
						<span style="font-size:.15rem;">{{show3}}</span>
						<!--<span style="font-size:.15rem;">{{money}}</span>-->
					</div>
					<div @click="shanchu">
						<span @click="$store.commit('dele')">删除</span>
					</div>
				</div>

			</div>

		</div>

		<div id="test" style="color: red; font-size: .3rem;"></div>

		<!--<div id="">
      	{{flagc}}
      </div>-->

	</div>

	</div>

</template>

<script>
	import Bus from '../route/bus'
	// 引入mapGtters，很重要
	import store from '../store/store'

	//全局定义的变量，下面要用
	var bianji1 = 0;
	export default {
		data() {
			return {
				datas: '',
				show1: '',
				show2: '',
				show3: '',
				count: getCookie('count'),
				flag: true,
				panduan: true,
				flag1: true,
				dis: 'block',
				msgs2: '',
				msgs1: ''

			}
		},
		store,
		methods: {
			backe() {
				history.go(-1)
			},
			jiesuan() {
				const h = this.$createElement;
				this.$notify({
					title: ' 付款提示',
					message: h('i', {
						style: 'color: teal'
					}, '付款成功！' + this.show3)
				});
				setTimeout(function() {
					history.go(0)
					deleteCookie('show1');
					deleteCookie('show2');
					deleteCookie('show3');
					setCookie('count', 0, '2')
				}, 1000);
			},
			//编辑按钮
			bianji() {
				if(bianji1 % 2 == 0) {
					this.flag = true;
					bianji1++;
				} else {
					this.flag = false;
					bianji1++
				}

			},
			//删除按钮
			shanchu() {
				this.flag1 = false
				this.count = 0;
				this.show3 = 0;
				deleteCookie('show1');
				deleteCookie('show2');
				deleteCookie('show3');
				setCookie('count', 0, '2')
				this.flag = true;
				this.dis = 'none'
				var elements = document.getElementById('delete1')
				//		removeElement(elements)
				history.go(0);

				console.log(elements)
			},
			//全选控制
			quanxuan() {
				var all = document.querySelector('#all')
				var alls = document.querySelector('#alls')
				if(bianji1 % 2 == 0) {
					//移除属性			
					all.checked = ''
					alls.checked = ''
					bianji1++;
				} else {
					all.checked = 'checked'
					alls.checked = 'checked'
					bianji1++

				}

			},
			//加
			add() {
				let a = parseInt(this.count)
				this.count = a + 1
				//对数据处理
				//			console.log()
				this.show3 = '￥' + parseInt(this.show3.substr(1, ).replace(",", "")) * parseInt(this.count)
			},
			//减
			reduce() {
				let b = parseInt(this.count)
				if(b > 1) {
					this.count = b - 1
					console.log(parseInt(this.show3.substr(1, ).replace(",", "")) / (parseInt(this.count) + 1))
					this.show3 = '￥' + (parseInt(this.show3.substr(1, ).replace(",", "")) / (parseInt(this.count) + 1))
				} else {
					this.count = 1
					this.show3 = '￥' + parseInt(this.show3.substr(1, ).replace(",", ""))
				}
			}
		},
		beforeMount() {
			this.msgs1 = this.$store.state.imgs
			this.msgs2 = this.$store.state.product
		},
		created() {
			Bus.$on('getTarget', function(shows) {
				let showTitle = shows.title
				let showUrl = shows.imgList[0];
				let showPrice = shows.priceInfo.nowPrice
				setCookie('show1', showTitle, '2')
				setCookie('show2', showUrl, '2')
				setCookie('show3', showPrice, '2')
				setCookie('count', 1, '2')
			});
			this.show1 = getCookie('show1')
			this.show2 = getCookie('show2')
			this.show3 = getCookie('show3')
		},
		computed: {
			msg() {
				return this.$store.state.msg;
			},
			counts() {
				return this.$store.state.counts;
			},
			money() {
				return this.$store.state.money;
			},
			heji() {
				return this.$store.state.heji;
			}
		}
	}
</script>

<style lang="css">
	.right {
		width: 50%;
		margin-top: 1rem;
	}
	
	#test {
		width: 3rem;
		height: 3rem;
		text-align: center;
		line-height: 1rem;
		position: fixed;
		left: 30%;
		top: 30%;
	}
	
	#bianji {
		width: 60%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border: 1px solid darkgray;
	}
	
	#bianji span {
		font-weight: bold;
		line-height: .3rem;
		display: block;
		width: 20%;
		border-right: 1px solid lightgray;
	}
	
	#el-col {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.el-row {
		line-height: .3rem;
		background-color: white;
		margin-bottom: .5rem;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: .01rem;
		font-size: .2rem;
		font-weight: bold;
	}
	
	.img img {
		/*vertical-align: top;*/
		margin-top: -.1rem;
		width: 1rem;
		height: 1rem;
	}
	
	html {
		background-color: white;
		margin: 0;
		padding: 0;
	}
	
	h1 {
		text-align: center;
		color: red;
	}
	
	#car {}
	
	.car {
		/*margin-top: .5rem;*/
		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;
		align-items: flex-end;
	}
	
	.car {
		text-align: center;
		color: black;
		font-size: .2rem;
		font-weight: bold;
		line-height: .5rem;
	}
	
	.car>div img {
		width: .2rem;
		height: .2rem;
	}
	
	.shop {
		width: 100%;
		position: fixed;
		bottom: 1.3rem;
	}
	
	.shop,
	.shangPin {
		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;
		align-items: flex-start;
		font-size: .25rem;
	}
	
	.shangPin {
		width: 40%;
	}
	
	.jiage {
		width: 100%;
		height: .5rem;
		background-color: red;
		color: white;
		margin-right: -1rem;
	}
	
	.jiage>div {
		width: 100%;
		text-align: center;
		line-height: .5rem;
	}
	
	.heji {
		width: 60%;
	}
	
	.heji>div {
		margin-left: -1rem;
		line-height: .5rem;
		/*font-size: .2rem;*/
	}
	
	.gouwu {
		overflow: auto;
		height: 3rem;
		/*background-color: white;*/
	}
	
	#car {
		position: relative;
	}
	/*商品*/
</style>